<template>
    <main class="page-bg" id="canvasDom">
        <n-breadcrumb class="head-breadcrumb">
            <n-breadcrumb-item>收货管理</n-breadcrumb-item>
            <n-breadcrumb-item>货物列表</n-breadcrumb-item>
        </n-breadcrumb>
        <header class="flex-between">
            <section class="head-right" data-html2canvas-ignore="true">
                <ScreenshotKit :downloadName="'快递信息管理'" />
            </section>
        </header>
        <header class="head-operation">
            <n-flex justify="space-between">
                <n-button color="#2e88cf" @click="activate('top')">
                    <template #icon>
                        <n-icon size="20" :color="'#fefefe'"><Search /></n-icon>
                    </template>
                    检索
                </n-button>
                <section class="btns-group flex-end">
                    <n-button color="#2e88cf" class="mr10" @click="activate('right')">
                        <template #icon>
                            <n-icon size="20" :color="'#fefefe'"><Add /></n-icon>
                        </template>
                        新增
                    </n-button>
                    <n-button color="#2e88cf" class="mr10" @click="handleDownload">
                        <template #icon>
                            <n-icon size="20" :color="'#fefefe'"><CloudDownloadOutline /></n-icon>
                        </template>
                        导出
                    </n-button>
                    <n-button color="#2e88cf" class="mr10" @click="handleUploadFiles">
                        <template #icon>
                            <n-icon size="20" :color="'#fefefe'"><CloudUploadOutline /></n-icon>
                        </template>
                        上传
                    </n-button>
                    <n-button color="#2e88cf" @click="handleBatchRemove">
                        <template #icon>
                            <n-icon size="20" :color="'#fefefe'"><TrashBinOutline /></n-icon>
                        </template>
                        批量删除
                    </n-button>
                </section>
            </n-flex>
        </header>
        <section class="table-main">
            <n-data-table 
            size="small"
            :columns="columns" 
            :data="data" 
            :bordered="false"
            :bottom-bordered="false"
            :style="{ height: `84vh` }"
            flex-height
            :scroll-x="1800"
            :row-key="rowKey"
            @update:checked-row-keys="handleCheck"
        />
        </section>
        <section class="pagination-box flex-center">
            <n-pagination v-model:page="page" 
            v-model:page-size="pageSize"
            :page-count="pageTotal"
            :page-sizes="pageSizes"
            show-size-picker>
                <template #prev>上一页</template>
                <template #next>下一页</template>
            </n-pagination>
        </section>
    </main>

    <n-drawer v-model:show="active" :width="502" :placement="placement">
        <n-drawer-content :title="drawerTitle" v-if="drawerType === 'SEARCH'">
            <section>
                <n-grid x-gap="12" :cols="4">
                    <n-gi>
                        <n-form-item label="货架号" path="goodsNum" label-align="left" label-placement="left">
                            <n-input v-model:value="goodsNum" placeholder="请输入" />
                        </n-form-item>
                    </n-gi>
                    <n-gi>
                        <n-form-item label="手机号" path="goodsNum" label-align="left" label-placement="left">
                            <n-input v-model:value="goodsNum" placeholder="请输入" />
                        </n-form-item>
                    </n-gi>
                    <n-gi>
                        <n-form-item label="取件码" path="goodsNum" label-align="left" label-placement="left">
                            <n-input v-model:value="goodsNum" placeholder="请输入" />
                        </n-form-item>
                    </n-gi>
                </n-grid>
            </section>
            <section class="flex-center">
                <n-button ghost color="#8a2be2" @click="handleNegativeSearch" class="mr10">
                    <template #icon><n-icon><Close /></n-icon></template>
                    取消
                </n-button>
                <n-button color="#8a2be2" @click="handlePositiveSearch">
                    <template #icon><n-icon><Checkmark /></n-icon></template>
                    确定
                </n-button>
            </section>
        </n-drawer-content>

        <n-drawer-content :title="drawerTitle" v-if="drawerType === 'ADD'">
            <n-form-item label="货架号" path="goodsNum" label-align="left" label-placement="left" label-width="90">
                <n-input v-model:value="addItem.goodsNum" placeholder="请输入" />
            </n-form-item>
            <n-form-item label="货架简称" path="abbreviation" label-align="left" label-placement="left" label-width="90">
                <n-input v-model:value="addItem.abbreviation" placeholder="请输入" />
            </n-form-item>
            <n-form-item label="商品图片" path="produceImg" label-align="left" label-placement="left" label-width="90">
                <n-upload :action="uploadAction" :headers="{'naive-info': 'hello!'}"
                :data="uploadData"
                :default-file-list="fileList"
                list-type="image-card"
                @before-upload="beforeUpload">
                    <n-button>上传图片</n-button>
                </n-upload>
            </n-form-item>
            <n-form-item label="收件手机号" path="consigneeNum" label-align="left" label-placement="left" label-width="90">
                <n-input v-model:value="addItem.consigneeNum" placeholder="请输入" />
            </n-form-item>
            <n-form-item label="收件人名称" path="consignee" label-align="left" label-placement="left" label-width="90">
                <n-input v-model:value="addItem.consignee" placeholder="请输入" />
            </n-form-item>
            <n-form-item label="取件码" path="pickupCode" label-align="left" label-placement="left" label-width="90">
                <n-input v-model:value="addItem.pickupCode" placeholder="请输入" />
            </n-form-item>
            <n-form-item label="商品包装" path="packing" label-align="left" label-placement="left" label-width="90">
                <n-input v-model:value="addItem.packing" placeholder="请输入" />
            </n-form-item>
            <n-form-item label="商品规格" path="specifications" label-align="left" label-placement="left" label-width="90">
                <n-input v-model:value="addItem.specifications" placeholder="请输入" />
            </n-form-item>
            <n-form-item label="商品状态" path="produceState" label-align="left" label-placement="left" label-width="90">
                <n-input v-model:value="addItem.produceState" placeholder="请输入" />
            </n-form-item>
            <n-form-item>
                <n-button ghost color="#8a2be2" @click="handleNegativeAdd" class="mr10">
                    <template #icon><n-icon><Close /></n-icon></template>
                    取消
                </n-button>
                <n-button color="#8a2be2" @click="handlePositiveAdd">
                    <template #icon><n-icon><Checkmark /></n-icon></template>
                    提交
                </n-button>
            </n-form-item>
        </n-drawer-content>
    </n-drawer>

    <ImportFiles v-if="fileShow" :showModal="fileShow"
    @dialogEvent="handleDialogEvent" />
</template>

<script setup lang="ts">
import { ref, reactive,h } from 'vue'
import { Search, Add, CloudUploadOutline, CloudDownloadOutline,TrashBinOutline,Calendar,Close, Checkmark } from '@vicons/ionicons5'
import { NTag,NIcon, NButton, useMessage, NImage,NText,useDialog, NCheckbox  } from 'naive-ui'
import type { DataTableColumns, DataTableRowKey, DrawerPlacement,UploadFileInfo  } from 'naive-ui'
import ScreenshotKit from '@/components/common/ScreenshotKit.vue';
import ImportFiles from '@/components/common/ImportFiles.vue'
const message = useMessage()
const dialog = useDialog()
   
type RowData = {
    produceId: string,
    goodsNum: string,
    abbreviation: string,
    produceImg: string,
    consignee: array,
    consigneeNum: array,
    pickupCode: string,
    packing: string,
    specifications: string,
    produceState: string
}
let page = ref(1)
let pageSize = ref(20)
let pageTotal = ref(100)
const pageSizes = [
    { label: '10 每页', value: 10 },
    { label: '20 每页', value: 20 },
    { label: '50 每页', value: 50 },
    { label: '100 每页', value: 100 }
]
let data = reactive(<Array<object>>[])
let columns = reactive(<TableColumn<RowData>>[]) 
let height = ref(300)
const checkedRowKeys = ref([])
const rowKey = (row: RowData) => row.address
const createColumns = ():DataTableColumns<RowData> => {
  return [
    { type: 'selection',fixed: 'left'},
    { title: '货架号', key: 'goodsNum', fixed: 'left' },
    { title: '货物简称', key: 'abbreviation', fixed: 'left', width: 220, },
    { title: '商品图片', key: 'produceImg', 
        render (row) {
            return h(
                NImage,
                {
                    src: row.produceImg,
                    width: 60,
                    height: 40
                },
                {
                default: () => row.goodsNum
                }
            )
        }
    },
    { title: '收件人名称', key: 'consignee'},
    { title: '收件人手机号', key: 'consigneeNum'},
    { title: '取件码', key: 'pickupCode'},
    { title: '商品包装', key: 'packing', 
        render (row) {
            const tags = row.packing.map((tagKey) => {
            return h(
                NTag,
                {
                style: {
                    marginRight: '6px'
                },
                type: 'info',
                bordered: false
                },
                {
                default: () => tagKey
                }
            )
            })
            return tags
        }
    },
    { title: '商品规格', key: 'specifications', width: 320,
        render (row) {
            const tags = row.specifications.map((tagKey) => {
            return h(
                NTag,
                {
                style: {
                    marginRight: '6px'
                },
                type: 'info',
                bordered: false
                },
                {
                default: () => tagKey
                }
            )
            })
            return tags
        }
    },
    { title: '商品状态', key: 'produceStateText',},
    { title: '操作', key: 'actions', align: 'center', fixed: 'right',width: 240,
      render (row) {
        return [
            h(
            NButton,
            {
                size: 'small',
                color: '#2e88cf',
                textColor: '#ffffff',
                style: { marginRight: '8px' },
                onClick: () => handleReback(row)
            },
            { default: () => '退回' }
            ),
            h(
            NButton,
            {
                size: 'small',
                color: '#2e88cf',
                textColor: '#ffffff',
                style: { marginRight: '8px' },
                onClick: () => handleTableUpdate(row)
            },
            { default: () => '修改' }
            ),
            h(
            NButton,
            {
                size: 'small',
                color: '#ff0000',
                textColor: '#ffffff',
                onClick: () => handleTableRemove(row)
            },
            { default: () => '删除' }
            )
        ]
      }
    }
  ]
}

const handleCheck = (rowKeys: DataTableRowKey[]) => {
    checkedRowKeys.value = rowKeys
}
const active = ref(false)
const drawerTitle = ref("")
const drawerType = ref("")
const uploadAction = ref("https://www.mocky.io/v2/5e4bafc63100007100d8b70f")
const uploadData = ref({'naive-data': 'cool! naive!'})
const placement = ref<DrawerPlacement>('right')
const operType = reactive({
    "top": "SEARCH",
    "right": "ADD"
})
const fileList = ref<UploadFileInfo[]>([])
type uploadType = {
    file: UploadFileInfo
    fileList: UploadFileInfo[]
}
const beforeUpload = (data: uploadType) => {
    if (data.file.file?.type !== 'image/png') {
        message.error('只能上传png格式的图片文件，请重新上传')
        return false
    }
    return true
}
const activate = (place: DrawerPlacement) => {
    active.value = true
    placement.value = place
    drawerTitle.value = place === 'top' ? '查询': '新增'
    drawerType.value = operType[place]
}
const goodsNum = ref("")
const addItem = ref<RowData>({
    produceId: "",
    goodsNum: "",
    abbreviation: "",
    produceImg: "",
    consignee: [],
    consigneeNum: [],
    pickupCode: "",
    packing: "",
    specifications: "",
    produceState: ""
})
let fileShow = ref(false)
const init = () => {
    columns = createColumns()
    for (let index = 0; index < pageTotal.value; index++) {
        let obj = {
            produceId: '0000'+index,
            goodsNum: "7-3-119"+index,
            abbreviation: "泰国金枕榴莲新鲜品货"+index,
            produceImg: "https://gw.alipayobjects.com/zos/antfincdn/aPkFc8Sj7n/method-draw-image.svg",
            consignee: "齐天大圣孙悟空",
            consigneeNum: "13713631198",
            pickupCode: index+'8793',
            packing: ['盒装', '袋装'],
            specifications: ['大件', '中等', '小件', '迷你件'],
            produceState: index%2===0? '1': '0',
            produceStateText: index%2===0? '在途': '已入库'
        }
        data.push(obj)
    }
}
init()
const handleNegativeSearch = () => { active.value = false }
const handlePositiveSearch = () => { active.value = false}
const handleNegativeAdd = () => { active.value = false }
const handlePositiveAdd = () => { active.value = false }
const handleTableRemove = (row) => {
    dialog.warning({
        title: '删除提示',
        content: () => '是否删除选中的数据？删除后不可恢复！',
        positiveText: '确定',
        negativeText: '取消',
        icon: () => h(Search),
        onPositiveClick: () => {
            message.success('数据删除中，请稍后')
        },
        onNegativeClick: () => {
            message.success('已取消删除操作')
        }
    })
}
const handleDownload = () => {
    dialog.warning({
        title: '导出',
        content: () => '是否导出全部数据？',
        positiveText: '确定',
        negativeText: '取消',
        icon: () => h(Search),
        onPositiveClick: () => {
            message.success('数据导出中，请等待……')
        },
        onNegativeClick: () => {
            message.success('已取消导出操作')
        }
    })
}
const handleUploadFiles = () => { fileShow.value = true }
const handleDialogEvent = () => { fileShow.value = false }
const handleReback = (row) => { 
    dialog.warning({
        title: '提示',
        content: () => '确定要退回此商品？',
        positiveText: '确定',
        negativeText: '取消',
        icon: () => h(Search),
        onPositiveClick: () => {
            message.success('商品退回中，请等待……')
        },
        onNegativeClick: () => {
            message.success('已取消退回操作')
        }
    })
}
const handleTableUpdate = (row) => {
    message.info("修改功能暂未上线")
}
const handleBatchRemove = (row) => {
    if (checkedRowKeys.value.length === 0) {
        message.warning("请选择要删除的数据")
    } else {
        dialog.warning({
            title: '批量删除提示',
            content: () => '是否删除选中数据？',
            positiveText: '确定',
            negativeText: '取消',
            icon: () => h(Search),
            onPositiveClick: () => {
                message.success('数据批量删除中，请等待……')
            },
            onNegativeClick: () => {
                message.success('已取消批量删除操作')
            }
        })
    }
}
</script>

<style scoped>
.page-bg {
    width: 100%;
    min-height: 100vh;
    /* background-color: #383f49; */
    color: #fff;
}
.head-breadcrumb {
   padding: 4px 10px;
   background-color: #eeeeee;
}
.head-operation {
    width: 100%;
    padding: 10px 16px;
    border-bottom: 1px solid #eeeeee;
}
.table-main {
    margin: 10px 16px;
}
.pagination-box {
    margin: 10px 16px;
    height: 40px;
}
.mr10 {
    margin-right: 10px; 
}
:deep(.n-checkbox.n-checkbox--checked .n-checkbox-box) {
    background-color: #0d6cf1;
    border-color: #0d6cf1;
}
</style>
  